<script setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox, ElPagination} from 'element-plus'
import {deleteTalent, findTalents} from '@/apis/zyj/talent.js'
import findTalent from '@/components/Talent/FindDialog.vue'
import AddDialog from "@/components/Talent/AddDialog.vue";
import UpdateTalent from "@/components/Talent/UpdataDialog.vue";

// 搜索条件
const searchForm = reactive({
  employeeId: '',
  employeeName: '',
  education: '',
})
// 表格数据
const tableData = reactive([])
const findDialog = ref(false)//查询对话框
const addDialog = ref(false)//新增对话框
const updateDialog = ref(false)//修改对话框
const select_order_number = ref('') //表格select选中的条数
const select_orderId = ref([]) //表格select复选框选中的id
const multipleSelection = ref()//选中行的数据
const multipleTable = ref()//用于表格多选框选中的清理
//初始化数据
function initData() {
  findTalents(searchForm, currentPage.value, pageSize.value).then(res => {
    console.log(res)
    tableData.length = 0
    tableData.push(...res.records);
    total.value = res.total;
    currentPage.value = res.current;
  })
}

onMounted(() => {
  initData()
})

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

//搜索按钮
const onSearch = () => {
  initData()
}
// 重置按钮
const onReset = () => {
  Object.keys(searchForm).forEach(key => searchForm[key] = '')
}
//新增按钮
const onAdd = () => {
  addDialog.value = true
}

//导出按钮
const onExport = () => {
  ElMessage.success('Exporting data...')
  // Implement export logic here
}

//编辑按钮
const handleEdit = (row) => {
  multipleSelection.value = {...row}
  multipleSelection.value.accountAddress = JSON.parse(multipleSelection.value.accountAddress);
  multipleSelection.value.currentAddress = JSON.parse(multipleSelection.value.currentAddress);
  console.log(multipleSelection.value)
  updateDialog.value = true
}
//批量删除按钮
const handleDelete = (row) => {
  if (row.employeeCode != null) {
    select_order_number.value = "1";
  } else {
    select_order_number.value = multipleSelection.value.length;
  }
  console.log(select_orderId.value)
  ElMessageBox.confirm(
      '是否要删除 ' + select_order_number.value + '条数据',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        if (row.employeeCode != null) {
          select_orderId.value = [];
          select_orderId.value.push(row.employeeCode)
        }
        deleteTalent(select_orderId.value).then((res) => {
          if (res == '成功') {
            initData()
            ElMessage.success('成功删除: ' + select_order_number.value + '条数据')
            select_order_number.value = "0";
            select_orderId.value = [];
            multipleTable.value.clearSelection();
          } else {
            ElMessage.error('系统错误！删除失败')
          }
        })
      })
      .catch(() => {
        ElMessage.info('删除取消')
      })
}
//查询按钮
const handleFind = (val) => {
  multipleSelection.value = {...val}
  console.log(multipleSelection.value)
  multipleSelection.value.accountAddress = JSON.parse(multipleSelection.value.accountAddress);
  multipleSelection.value.currentAddress = JSON.parse(multipleSelection.value.currentAddress);
  findDialog.value = true
}

//关闭添加对话框
const closeDialog = () => {
  console.log("jjjj")
  findDialog.value = false;
  updateDialog.value = false;
  addDialog.value = false;
  initData()
};
//选中事件
const handleSelectionChange = (val) => {
  // 解决来回切换页面，也无法清除上次选中情况
  multipleSelection.value = val;
  select_order_number.value = multipleSelection.value.length;
  select_orderId.value = [];
  if (val) {
    val.forEach((row) => {
      if (row) {
        select_orderId.value.push(row.employeeCode);
      }
    });
  }
}
//分页
const handleSizeChange = (val) => {
  initData()
}
//分页
const handleCurrentChange = (val) => {
  initData()
}
</script>

<template>
  <div class="employee-list">
    <el-card>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="员工编码">
          <el-input v-model="searchForm.employeeId" placeholder="请输入员工编码" clearable/>
        </el-form-item>
        <el-form-item label="员工名称">
          <el-input v-model="searchForm.employeeName" placeholder="请输入员工名称" clearable/>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="searchForm.education" placeholder="请选择学历" clearable style="width: 120px">
            <el-option label="博士" value="博士"/>
            <el-option label="研究生" value="研究生"/>
            <el-option label="本科" value="本科"/>
            <el-option label="专科" value="专科"/>
            <el-option label="高中" value="高中"/>
            <el-option label="初中" value="初中"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <div class="action-buttons">
        <el-button type="primary" @click="onAdd" plain>新增</el-button>
        <el-button type="danger" @click="handleDelete" :disabled="select_order_number == 0" plain>删除</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%"
                :header-cell-style="{ backgroundColor: '#f8f8f9', height: '50px' }"
                @selection-change="handleSelectionChange" :row-style="{ height: '60px' }"
                max-height="380px">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="employeeCode" label="员工编码" width="180">
          <template #default="scope">
            <el-link @click="handleFind(scope.row)">{{ scope.row.employeeCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="employeeName" label="员工名称" width="120"/>
        <el-table-column prop="phone" label="联系电话" min-width="100">
          <template #default="scope">
            <el-tooltip :content="scope.row.phone" raw-content placement="top-start" v-if="scope.row.phone">
              <span v-if="scope.row.phone && scope.row.phone.length <= 6">
                {{ scope.row.phone }}
              </span>
              <!-- 如果单元格中有值，并且值得长度大于15，便使用substr截取0-15的内容显示，后面的变成省略号-->
              <span v-if="scope.row.phone && scope.row.phone.length > 6">
                {{ scope.row.phone.substring(0, 6) + "..." }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="100">
          <template #default="scope">
            <el-tooltip :content="scope.row.email" raw-content placement="top-start" v-if="scope.row.email">
              <span v-if="scope.row.email && scope.row.email.length <= 6">
                {{ scope.row.email }}
              </span>
              <!-- 如果单元格中有值，并且值得长度大于15，便使用substr截取0-15的内容显示，后面的变成省略号-->
              <span v-if="scope.row.email && scope.row.email.length > 6">
                {{ scope.row.email.substring(0, 6) + "..." }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="gender" label="用户性别" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.gender == '男' ? 'primary' :(scope.row.gender == '女' ? 'primary':'warning') "
                    size="large">
              {{ scope.row.gender }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="education" label="学历" width="80"/>
        <el-table-column prop="maritalStatus" label="婚姻状况" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.maritalStatus == '已婚' ? 'primary' :'info'"
                    size="large">
              {{ scope.row.maritalStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ethnicity" label="民族" width="80"/>
        <el-table-column prop="birthDate" label="出生年月" width="140"/>
        <el-table-column prop="politicalAffiliation" label="政治面貌" width="100">
          <template #default="scope">
            <el-tag
                :type="scope.row.politicalStatus == '党员' ? 'primary' : 'info' | scope.row.politicalStatus == '团员' ? 'success' : 'info' "
                size="large">
              {{ scope.row.gender }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="education" label="学历" width="80"/>
        <el-table-column prop="maritalStatus" label="婚姻状况" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.maritalStatus == '已婚' ? 'primary' : 'info'" size="large">
              {{ scope.row.maritalStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ethnicity" label="民族" width="80"/>
        <el-table-column prop="birthDate" label="出生年月" width="140"/>
        <el-table-column prop="politicalAffiliation" label="政治面貌" width="100">
          <template #default="scope">
            <el-tag
                :type="scope.row.politicalStatus == '党员' ? 'primary' : 'info' | scope.row.politicalStatus == '团员' ? 'success' : 'info'"
                size="large">
              {{ scope.row.politicalStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
            <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination v-model:currentPage="currentPage" v-model:pageSize="pageSize" :page-sizes="[10, 20, 50, 100]"
                       :small="false" :disabled="false" :background="true"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <find-talent :findDialog="findDialog" :form="multipleSelection" @close-dialog="closeDialog"/>
    <add-dialog :addDialog="addDialog" :total="total" @close-dialog="closeDialog"/>
    <update-talent :updataDialog="updateDialog" :form="multipleSelection" @close-dialog="closeDialog"/>
  </div>
</template>

<style scoped>
.employee-list {
  padding: 20px;
}

.action-buttons {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: left;
}

.el-pagination {
  justify-content: flex-end;
}
</style>